<template>
  <view class="page-tab">
    <view class="tab-list">
      <view v-for="(item,index) of tabData.els" :key="index" class="tab-item" @click="handleClick(item)">
        <view :class="{'active-item-title':item.value === formData[tabData.prop]}" class="item-title">
          {{ item.label }}
        </view>
        <view v-if="item.value === formData[tabData.prop]" class="item-icon">
          <view class="item-icon-logout"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * tab栏
 */
export default {
  name: "page-tab"
}
</script>

<script setup>
import {
  ref
} from "vue"

/**
 * 定义emit
 */
const emit = defineEmits(['tab-filter'])

/**
 * props传入
 */
const props = defineProps({
  tabData: {}
})

/**
 * 初始化数据
 */
const tabData = ref(props.tabData)

/**
 * 默认选中数据
 */
const formData = ref({})

/**
 * 点击事件
 */
const handleClick = (item) => {
  formData.value[tabData.value.prop] = item.value
  handleFilter(formData.value)
}

/**
 * 发送数据给上一级
 */
const handleFilter = (value) => {
  emit('tab-filter', value)
}

/**
 * 初始化数据
 */
const initData = () => {
  if (tabData.value.initData) {
    formData.value[tabData.value.prop] = tabData.value.initData
  }
}

initData()
</script>

<style>
.page-tab {
  padding: 20rpx 30rpx;
  background-color: #007BDE;
  flex: 0;
  flex-basis: 60rpx;

  .tab-list {
    display: flex;

    .tab-item {
      flex: 1;

      .item-title {
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 40rpx;
        text-align: center;
        opacity: 0.5;
      }

      .active-item-title {
        opacity: 1;
      }

      .item-icon {
        margin-top: 16rpx;
        display: flex;
        justify-content: center;

        .item-icon-logout {
          width: 50rpx;
          height: 4rpx;
          background-color: #ffffff;
          border-radius: 2rpx;
        }
      }
    }
  }
}
</style>